<template>
  <div>
    <Hero title="Welcome back!" />
    <div class="min-h-3/4 flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div class="max-w-md w-full">
        <div>
          <h2 class="mt-6 text-center text-3xl leading-9 title">
            Sign in to your account
          </h2>
        </div>
        <form class="mt-8" @submit.prevent="submit">
          <input type="hidden" name="remember" value="true" />
          <div class="rounded-md shadow-sm">
            <div>
              <input aria-label="Email" name="email" v-model="email" type="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5" placeholder="Email" />
            </div>
            <div class="-mt-px">
              <input aria-label="Password" name="password" v-model="password" type="password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5" placeholder="Password" />
            </div>
          </div>

          <div class="mt-6">
            <button type="submit" :disabled="loggingIn" class="group relative w-full flex justify-center button button-primary">
              <span class="absolute left-0 inset-y pl-3">
                <svg class="h-5 w-5 text-white group-hover:text-white transition ease-in-out duration-150" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                </svg>
              </span>
              Sign in
            </button>
          </div>
        </form>

        <div class="mt-4 text-center">
          <router-link :to="{ name: 'ForgotPassword' }" class="is-muted-link">
            Forgot Password?
          </router-link>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import Hero from '@/components/Hero.vue'

export default {
    data () {
      return {
        email: '',
        password: '',
      }
    },
    components: {
      Hero
    },
    computed: {
      loggingIn () {
        return this.$store.state.authentication.status.loggingIn;
      }
    },
    methods: {
      submit () {
        const { email, password } = this;
        this.$store.dispatch('authentication/login', { email, password });
      }
    }
};
</script>
